import React, { Component } from 'react';
import { connect } from 'dva';
import {
  List, Button, Card, Radio,Icon,Row,Col,Tabs,Avatar,Spin,message,Tag
} from 'antd';
import { Bar } from '../../components/Charts';
import styles from './CouponDetails.less';
import InfiniteScroll from 'react-infinite-scroller';

const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';
const TabPane = Tabs.TabPane;
@connect(state => ({
  coupon: state.coupon,
}))
export default class CouponDetails extends Component {
  state = {
    couponId:-1,

    salesData:[],
    loading:true,

    gotListData:[],
    gotPageNo:1,
    gotPageSize:10,
    gotTotal:0,
    gotHasMore: true,
    gotLoading:true,

    usedPageNo:1,
    usedPageSize:10,
    usedTotal:0,
    usedHasMore: true,
    usedLoading:true,
    usedListData:[],

  };

  ////初始化渲染后触发 整个过程只调用一次
  componentDidMount() {
    //初始化图表
    if(this.props.location.query) {
      var pcId = this.props.location.query.pcId;
      this.state.couponId=pcId;
      this.setState({
        couponId: pcId,
      });
      this.initCharts(pcId)
      this.loadGotListData(pcId,0)
    }
  }

  initCharts(couponId ){
    const { dispatch } = this.props;

    // 需要传递的参数信息
    const params = {
      couponId:couponId,
    };
    dispatch({
      type: 'coupon/fetchLoadCouponResultChart',  //请求的action
      payload:params,
      callback:(data) =>{
        this.setState({
          salesData: data,
          loading:false
        });
      }
    });
  }

  loadGotListData(couponId ,useStatus){
    const { dispatch } = this.props;
    const { gotPageNo ,gotPageSize ,usedPageNo,usedPageSize} = this.state;

    // 需要传递的参数信息
    const params = {
      pageNo:useStatus==0?gotPageNo:usedPageNo,
      pageSize:useStatus==0?gotPageSize:usedPageSize,
      couponId:couponId,
      useStatus:useStatus
    };
    dispatch({
      type: 'coupon/fetchListPluginCouponResult',  //请求的action
      payload:params,
      callback:(data) =>{
        if(useStatus == 0){
          for(var i in data.list)
            this.state.gotListData.push(data.list[i])
          this.setState({
            gotListData: this.state.gotListData,
            gotLoading:false,
            gotPageNo:data.pageNo,
            gotPageSize:data.pageSize,
            gotTotal:data.total
          });
        }else{
          for(var i in data.list)
            this.state.usedListData.push(data.list[i])
          this.setState({
            usedListData: this.state.usedListData,
            usedLoading:false,
            usedPageNo:data.pageNo,
            usedPageSize:data.pageSize,
            usedTotal:data.total
          });
        }
      }
    });
  }

  handleGotListOnLoad = () => {
    let gotListData = this.state.gotListData;
    this.state.gotPageNo++;
    this.setState({
      gotLoading: true,
      gotPageNo:this.state.gotPageNo
    });
    if (gotListData.length >= this.state.gotTotal) {
      message.warning('没有更多数据');
      this.setState({
        gotHasMore: false,
        gotLoading: false,
      });
      return;
    }
    this.loadGotListData(this.state.couponId,0)
  }

  handleUsedListOnLoad = () => {
    let usedListData = this.state.usedListData;
    this.state.usedPageNo++;
    this.setState({
      usedPageSize: true,
      usedPageNo:this.state.usedPageNo
    });
    if (usedListData.length >= this.state.usedTotal) {
      message.warning('没有更多数据');
      this.setState({
        usedHasMore: false,
        usedLoading: false,
      });
      return;
    }
    this.loadGotListData(this.state.couponId,1)
  }

  tabChange = (v) =>{
    if(this.state.usedListData.length == 0 ){
      this.loadGotListData(this.state.couponId,1)
    }else if(this.state.gotListData.length == 0 ){
      this.loadGotListData(this.state.couponId,0)
    }
  }

  render() {
    const { salesData ,loading ,gotListData,gotLoading,gotHasMore,usedLoading,usedHasMore,usedListData} = this.state;

    return (
        <Card
          loading={loading}
          bordered={false}
          bodyStyle={{ padding: 0 }}
          title="优惠券使用情况"
        >
          <div className={styles.salesCard}>
              <Row>
                <Col xl={24} lg={24} md={24} sm={24} xs={24}>
                  <div className={styles.salesBar}>
                    <Bar
                      height={295}
                      data={salesData}
                    />
                  </div>
                </Col>
              </Row>
          </div>

          <div className={styles.salesCard}>
            <Tabs  size="large" tabBarStyle={{ marginBottom: 24 }} onTabClick={this.tabChange}>
              <TabPane tab="已领取" key="sales">
                <div className="demo-infinite-container">
                  <InfiniteScroll
                    initialLoad={false}
                    pageStart={0}
                    loadMore={this.handleGotListOnLoad}
                    hasMore={!gotLoading && gotHasMore}
                    useWindow={false}
                  >
                    <List
                      dataSource={gotListData}
                      renderItem={item => (
                        <List.Item key={item.id}>
                          <List.Item.Meta
                            avatar={<Avatar src={item.userHead} />}
                            title={item.userName}
                            description={item.dTime}
                          />
                          <Tag color={item.status==0?"#48dc98":"#8d8d8d"}>{item.statusName}</Tag>
                        </List.Item>
                      )}
                    >
                      {gotLoading && gotHasMore && <Spin className="demo-loading" />}
                    </List>
                  </InfiniteScroll>
                </div>
              </TabPane>
              <TabPane tab="已使用" key="views">
                <div className="demo-infinite-container">
                  <InfiniteScroll
                    initialLoad={false}
                    pageStart={0}
                    loadMore={this.handleUsedListOnLoad}
                    hasMore={!usedLoading && usedHasMore}
                    useWindow={false}
                  >
                    <List
                      dataSource={usedListData}
                      renderItem={item => (
                          <List.Item key={item.id}>
                            <List.Item.Meta
                              avatar={<Avatar src={item.userHead} />}
                              title={item.userName}
                              description={item.dTime}
                            />
                            <Tag color="#8d8d8d">{item.statusName}</Tag>
                          </List.Item>
                        )}
                    >
                      {usedLoading && usedHasMore && <Spin className="demo-loading" />}
                    </List>
                  </InfiniteScroll>
                  </div>
              </TabPane>
            </Tabs>
          </div>

        </Card>
    );
  }
}
